<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 60%;
            height: 30px;
            margin-top: 30px;
            margin-left: 100px;
        }

        button {
            width: 50px;
            height: 30px;
            margin: auto;
        }

        .container {
            width: 100%;
            height: 700px;
            margin: auto;
        }

        .box1 {
            width: 100%;
            height: 60px;
            display: flex;
            margin-bottom: 1px;
            text-align: center;
            flex-direction: row;
            justify-content: space-between;
            background-color: gray;
        }
         span {
            /* position: absolute; */
            left: 60px;
            width: 50px;
            height: 60px;
            display: none;
        }
        .heah {
            width: 100%;
            height: 100px;
            background-color: darkturquoise;
        }
        .true p{
            text-decoration: line-through;
        }
    </style>
    <script src="../day6jquery/jquery3.5.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="heah">
            <input type="text" placeholder="请输入任务">
            <button>添加</button>
        </div>
        <div class="box"></div>
    </div>
    <script>
        let ipt = $('input');
        let btn = $('button');
        let box = $('.box');


        var arr = []
        init()
        function init() {
            box.empty()

            for (var i = 0; i < arr.length; i++) {
                box.append('<div class="box1" id="item'+i+'">' +
                    ' <span class="span'+i+'">✔</span>' +
                    '<p onclick="change('+i+')">' + arr[i] + '</p>' +
                    '<div onclick="dele('+i+')">x</div>' +
                    '</div>'

                );
                arr[i].setAttribute('index',i)
                console.log(arr[i]);
            }
        }

        function dele(index){
            arr.splice(index,1);
            init()
        }

        function change(index){
            let span = $('.span'+index);
            let item = $('#item'+index)
            let str =  span.css('display');
            console.log(str);
            if(str == 'none'){
                span.css("display", "inline")
        item.attr('class', 'item true')
        item.css({
            "background-color":"#9e9999",
            display:'flex',
            justifyContent: 'space-between'
        });

    } else {
        span.css("display", "none")
        item.attr('class', 'item')
        item.css("background-color", "#808080");
            }
            
        }
        function add(){
            let value = ipt.val();
            if (!value) {
                return
            } if(arr.indexOf(value) !== -1){
                alert('任务已存在')
                return
            }
                arr.push(value);
                init()
                ipt.val('')
            
        }
        btn.click(add)


        ipt.keydown(function(e){
            if(e.keyCode == 13){
                add()
            }
        })
    </script>
</body>

</html>